<template>
	<view class="userinfo_page">
		<view class="top_block">
			<view class="name">头像</view>
			<image class="img" @tap="updataImg" src="" mode=""></image>
		</view>
		<view class="list">
			<view class="li">
				<view class="name">账号</view>
				<view class="value">
					<input class="text" type="text" v-model.trim="form.userName" />
					<i class="iconfont icon-youjiantou" />
				</view>
			</view>
			<view class="li">
				<view class="name">二维码</view>
				<view class="value">
					<input class="text" type="text" v-model.trim="form.userName" />
					<i class="iconfont icon-youjiantou" />
				</view>
			</view>
			<view class="li" @tap="openGender">
				<view class="name">性别</view>
				<view class="value">
					{{ form.gender | filGender }}
					<i class="iconfont icon-youjiantou" />
				</view>
			</view>

			<view class="li">
				<view class="name">管理员</view>
				<view class="value">
					<text>{{ form.email }}</text>
					<!-- <input class="text" type="text" v-model.trim="form.email" /> -->
					<!-- <i class="iconfont icon-youjiantou" /> -->
				</view>
			</view>

			<view class="li">
				<view class="name">子管理员</view>
				<view class="value">
					<text>{{ form.email }}</text>
					<!-- <input class="text" type="text" v-model.trim="form.email" /> -->
					<!-- <i class="iconfont icon-youjiantou" /> -->
				</view>
			</view>

			<view class="li">
				<view class="name">单位名称</view>
				<view class="value">
					<input class="text" type="text" v-model.trim="form.address" />
					<i class="iconfont icon-youjiantou" />
				</view>
			</view>
			<view class="li">
				<view class="name">税号</view>
				<view class="value">
					<input class="text" type="text" v-model.trim="form.address" />
					<i class="iconfont icon-youjiantou" />
				</view>
			</view>

			<view class="li">
				<view class="name">银行账号</view>
				<view class="value">
					<input class="text" type="text" v-model.trim="form.address" />
					<i class="iconfont icon-youjiantou" />
				</view>
			</view>

			<view class="li">
				<view class="name">开户银行</view>
				<view class="value">
					<input class="text" type="text" v-model.trim="form.address" />
					<i class="iconfont icon-youjiantou" />
				</view>
			</view>

			<view class="li">
				<view class="name">安装地址</view>
				<view class="value">
					<text>{{ form.phone }}</text>
					<!-- <input class="text" type="text" v-model.trim="form.phone" /> -->
					<!-- <i class="iconfont icon-youjiantou" /> -->
				</view>
			</view>

			<view class="li">
				<view class="name">手机号码</view>
				<view class="value">
					<text>{{ form.phone }}</text>
					<!-- <input class="text" type="text" v-model.trim="form.phone" /> -->
					<!-- <i class="iconfont icon-youjiantou" /> -->
				</view>
			</view>

			<view class="li">
				<view class="name">联系人</view>
				<view class="value">
					<text>{{ form.phone }}</text>
					<!-- <input class="text" type="text" v-model.trim="form.phone" /> -->
					<!-- <i class="iconfont icon-youjiantou" /> -->
				</view>
			</view>

			<view class="li">
				<view class="name">单位行业</view>
				<view class="value">
					<text>{{ form.phone }}</text>
					<!-- <input class="text" type="text" v-model.trim="form.phone" /> -->
					<!-- <i class="iconfont icon-youjiantou" /> -->
				</view>
			</view>

			<view class="li">
				<view class="name">单位性质</view>
				<view class="value">
					<text>{{ form.phone }}</text>
					<!-- <input class="text" type="text" v-model.trim="form.phone" /> -->
					<!-- <i class="iconfont icon-youjiantou" /> -->
				</view>
			</view>

			<view class="li">
				<view class="name">饮水人数</view>
				<view class="value">
					<text>{{ form.phone }}</text>
					<!-- <input class="text" type="text" v-model.trim="form.phone" /> -->
					<!-- <i class="iconfont icon-youjiantou" /> -->
				</view>
			</view>

			<view class="li">
				<view class="name">办公面积</view>
				<view class="value">
					<text>{{ form.phone }}</text>
					<!-- <input class="text" type="text" v-model.trim="form.phone" /> -->
					<!-- <i class="iconfont icon-youjiantou" /> -->
				</view>
			</view>
		</view>

		<!-- 性别选择栏 -->

		<uni-popup ref="filpopup" type="top">
			<view class="down_block">
				<view class="li" :class="curFilterStatus == item.value ? 'active' : null" v-for="item in genderList" :key="item.value" @click.stop="selectFilStatus(item.value)">
					{{ item.name }}
					<i class="iconfont icon-duigou" />
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
// import {
// 	pathToBase64,
// 	base64ToPath
// } from 'image-tools'
// import md5 from 'md5';

// import uploadImage from '@/common/ossutil/uploadFile.js';

// import {
// 	editUserInfo,
// 	fileUpload
// } from '@/api/userInfo';

export default {
	data() {
		return {
			imUrl: '',
			userinfo: {},
			form: {
				phone: '',
				userName: '',
				email: '',
				gender: '',
				address: ''
			},
			curFilterStatus: 0,
			genderList: [
				{
					name: '男',
					value: 'M'
				},
				{
					name: '女',
					value: 'F'
				}
			]
		}
	},
	filters: {
		filGender(value) {
			if (value && value.toUpperCase() == 'M') {
				return '男'
			} else if (value && value.toUpperCase() == 'F') {
				return '女'
			} else {
				return '未知'
			}
		}
	},
	onShow() {
		this.userinfo = uni.getStorageSync('userinfo')
		this.form.phone = this.userinfo.phone
		this.form.userName = this.userinfo.userName
		this.form.email = this.userinfo.email
		this.form.gender = this.userinfo.gender
		this.form.address = this.userinfo.address
		this.curFilterStatus = this.form.gender
		console.log('this.userinfo', this.userinfo)
	},
	methods: {
		updataImg: async function() {
			// var date = new Date();
			// var year = date.getFullYear();
			// var month = date.getMonth() + 1;
			// var day = date.getDate();
			// var nowDate = year + "/" + month + "/" + day;
			// uni.chooseImage({
			// 	count: 1, //默认9
			// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 	sourceType: ['album', 'camera'], //从相册选择
			// 	success: (res) => {
			// 		this.imgUrl = res.tempFilePaths[0];
			// 		// this.upImg()
			// 		this.upPhoto()
			// 		console.log('this.imgUrl ', this.imgUrl)
			// 	}
			// });
		},

		async upPhoto() {
			console.log('12312', fileUpload)
			await this.$http
				.post(fileUpload, { file: this.imUrl })
				.then(r => {
					console.log('r222', r)
				})
				.catch(() => {})
		},

		// 上传头像
		upImg() {
			let that = this

			uni.showLoading()

			uploadImage(
				that.imUrl,
				'app001/usercert/',
				result => {
					// that.IdCardfront = result;
					uni.hideLoading()
					console.log('result', result)
				},
				error => {
					console.log('error1', error)
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: 'upload images error'
					})
				}
			)
		},
		// 修改性别弹窗
		openGender() {
			this.$refs.filpopup.open('top')
		},
		// 选择性别
		selectFilStatus(value) {
			this.curFilterStatus = value
			this.$refs.filpopup.close()
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}

.userinfo_page {
	margin-top: 24px;
	background-color: #ffffff;

	.top_block {
		width: 100%;
		padding: 24px 32px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.img {
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
			background-color: #cccccc;
		}
	}

	.list {
		width: 100%;
		padding: 0 32px;
		box-sizing: border-box;

		.li {
			width: 100%;
			height: 100upx;
			padding: 24px 0;
			box-sizing: border-box;
			border-top: 2px solid #ececec;
			font-size: 32px;
			font-family: PingFang SC-常规体, PingFang SC;
			font-weight: normal;
			color: #262626;

			display: flex;
			align-items: center;
			justify-content: space-between;

			&:last-child {
				border-bottom: none;
			}

			.value {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 32px;
				font-family: PingFang SC-常规体, PingFang SC;
				font-weight: normal;
				color: #595959;

				.text {
					flex: 1;
					text-align: right;
				}
			}
		}
	}

	.iconfont {
		font-size: 24upx;
		margin-left: 10upx;
	}

	.down_block {
		background-color: #ffffff;

		.li {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20upx;
			box-sizing: border-box;
			height: 100upx;

			font-weight: 400;
			color: #424041;

			&.active {
				font-weight: 600;
				color: #d90000;
				background-color: #fdf7ed;

				.iconfont {
					color: #d90000;
				}
			}

			.iconfont {
				color: #ffffff;
			}
		}
	}
}
</style>
